<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>流程管理</title>

    <!-- Bootstrap -->
    <link href="../../bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../../css/content.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
            function showDeleteId(obj) {
                $("#delete").attr("onclick","window.location.href='${pageContext.request.contextPath}/delDeployment?deploymentId="+obj+"'")
        }
    </script>
</head>
<body>

<!--路径导航-->
<ol class="breadcrumb breadcrumb_nav">
    <li>首页</li>
    <li>流程管理</li>
    <li class="active">查看流程</li>
</ol>
<!--路径导航-->

<div class="page-content">
    <form class="form-inline">
        <div class="panel panel-default">
            <div class="panel-heading">部署信息管理列表</div>
            
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th width="20%">ID</th>
                        <th width="50%">流程名称</th>
                        <th width="20%">发布时间</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
					<c:forEach var="dep" items="${deploymentPageInfo.list}">
	                    <tr>
	                        <td>${dep.id}</td>
	                        <td>${dep.name}</td>
	                        <td>
	                        	<fmt:formatDate value="${dep.deploymentTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
	                        </td>
	                        <td>
	                            <a  onclick="showDeleteId(${dep.id})"  class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-remove"></span> 删除</a>
	                        </td>
	                    </tr>
					</c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </form>


   <form class="form-inline">
        <div class="panel panel-default">
            <div class="panel-heading">流程定义信息列表</div>
            
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th width="12%">ID</th>
                        <th width="18%">名称</th>
                        <th width="10%">流程定义的KEY</th>
                        <th width="10%">流程定义的版本</th>
                        <th width="15%">流程定义的规则文件名称</th>
                        <th width="15%">流程定义的规则图片名称</th>
                        <th width="10%">部署ID</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
					<c:forEach var="pd" items="${processDefinitionPageInfo.list}">
	                    <tr>
	                        <td>${pd.id}</td>
	                        <td>${pd.name}</td>
	                        <td>${pd.key}</td>
	                        <td>${pd.version}</td>
	                        <td>${pd.resourceName}</td>
	                        <td>${pd.diagramResourceName}</td>
	                        <td>${pd.deploymentId}</td>
	                        <td>
	                          <a target="_blank" href="viewImage?deploymentId=${pd.deploymentId}&imageName=${pd.diagramResourceName}" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-eye-open"></span> 查看流程定义图</a>
	                        </td>
	                    </tr>
					</c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>


<!-- 显示分页信息 -->
<div class="row">
    <!-- 分页文字信息 -->
    <div class="col-md-6">
        当前${processDefinitionPageInfo.pageNum}页,总${processDefinitionPageInfo.pages}页,总 ${processDefinitionPageInfo.total}条记录</div>
    <!-- 分页条 信息-->
    <div class="col-md-6">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li><a href="${pageContext.request.contextPath}/processDefinitionList?pageNum=1">首页</a>
                </li>

                <!-- 如果有上一页 就显示-->
                <c:if test="${processDefinitionPageInfo.hasPreviousPage}">
                    <li>
                        <!-- 前一页是当前页-1 --> <a
                            href="${pageContext.request.contextPath}/processDefinitionList?pageNum=${processDefinitionPageInfo.pageNum-1}"
                            aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                    </a></li>
                </c:if>


                <c:forEach items="${processDefinitionPageInfo.navigatepageNums }" var="page_Num">

                    <!-- 判断 是不是当前页 如果是显示高亮-->
                    <c:if test="${page_Num == processDefinitionPageInfo.pageNum }">
                        <li class="active"><a href="#">${page_Num}</a>
                        </li>
                    </c:if>
                    <c:if test="${page_Num != processDefinitionPageInfo.pageNum }">
                        <li><a href="${pageContext.request.contextPath}/processDefinitionList?pageNum=${page_Num}">${page_Num}</a>
                        </li>
                    </c:if>
                </c:forEach>


                <c:if test="${processDefinitionPageInfo.hasNextPage}">
                    <li><a href="${pageContext.request.contextPath}/processDefinitionList?pageNum=${processDefinitionPageInfo.pageNum+1}"
                           aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a></li>
                </c:if>
                <li><a href="${pageContext.request.contextPath}/processDefinitionList?pageNum=${processDefinitionPageInfo.pages}">末页</a>
                </li>
            </ul>
        </nav>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">确认删除？</h4>
            </div>
<%--            <div class="modal-body">在这里添加一些文本</div>--%>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="delete" type="button" class="btn btn-primary"> 确定 </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>